<template>
	<view class="main">
		<!-- #ifdef MP-WEIXIN -->
		<navbar title="搜索订单" :bgColor="bgColor" :btnColors='btnColor' :isGoBack="true" :isNotice="true" :visible="true"  ></navbar>
		<!-- #endif -->
		<view class="flex pb-20 search-main justify-between">
		   <view class="search-bar-box">
				<u-icon name="search" class="icon-search_in-box" size="25"></u-icon> 
				<input type="text" class="search-bar-input bg-white" placeholder="请输入关键字" v-model="search" @input="handleInput" />				
				
		   </view>			
		</view>
	   <view class="flex flex-direction search_history" v-if="search_history">
			<view class="flex justify-between ml-20 mr-20 mt-20">
				<text class="text-bold">历史搜索</text>
				<u-icon name="trash-fill" size="26" @click="delsearch"></u-icon>
			</view>
			
			<view class="flex flex-wrap ml-20 mr-20">
				<view class="p-10" v-for="(item,index) in searchKey" :key="index">
					<u-tag :text="item"  shape="circle" bgColor="#F7F7F7" color="#999999" borderColor="#F7F7F7"  @click="searchgoods(item)"></u-tag>
				</view>
					
			</view>
	   </view>
		
		
		<view class="flex ml-40 flex-direction searc_name" v-if="search_name">			
			<view v-for="(item, index) in list" :key="index" style="margin-bottom: 40rpx;margin-right: 40rpx;" class=" flex  align-center border-b pb-20 " @click="seach_key(item)">
				<view class="">
					<u-icon name="search" size="24"></u-icon>
				</view>
			    <text >{{item.goods_title}}</text>
			</view>			 
		</view>
	</view>
</template>
<script>
	
	export default {
		
		data() {
			return {
				...getApp().globalData.config,
				newlist:{},
				nfc:"",	
				info:'',
				userInfo:'',
				search:'',
				search_history:true,
				search_name:false,
				list: [],  
			    searchKey:[],
				is_search:1,
			}
		},	
		onLoad() {
		},
		onShow() {
			try{
				var vv = uni.getStorageSync('searchLocal_order') || "";
				if(vv) {
					this.searchKey = JSON.parse(vv);
				} else {
					this.searchKey = [];
				}
			} catch(e){
				console.log(e)
			}
		},			
		methods: {	
			...getApp().globalData.funcion,
			
			delsearch(){
				uni.setStorage({
					key: 'searchLocal_order',
					data: []
				});
				this.searchKey=[]
			},
			
			submit(){
				let obj={
					token:uni.getStorageSync('userInfo').token,
					params:this.info
				}
				this.$http.dobinding(obj).then(res=>{
					console.log('res',res)
					if(res.resCode=="9999"){
					 uni.showToast({title:res.resMessage,icon: 'none'})      
					}else{					
					  uni.showToast({title:res.resMessage,icon: 'none'})        
					}
				})
			},
			searchgoods(goods_name){
				console.log('res',goods_name)
				this.is_searc=0
				this.list=[]
				
				this.$http.search_order({'search':goods_name, 'token':uni.getStorageSync('userInfo').token}).then(res=>{
					if (res.resCode == "9999") {
						this.list=res.data.goods_list
														
						this.search_history=false
						this.search_name=true						
					}else{
						this.list=[]
					}
				})
				
			},
			
			handleInput(e){
				let detail=e.detail.value
				this.list=[]
				this.$http.search_order({'search':detail,'token':uni.getStorageSync('userInfo').token}).then(res=>{
					if (res.resCode == "9999") {
						this.list=res.data.goods_list															
						this.search_history=false
						this.search_name=true						
					}else{
						this.list=[]
					}
				})
			},
			seach_key(item){
				if(this.search){
					var newArr = this.searchKey;
					if(this.searchKey.indexOf(this.search) == -1){
						newArr.unshift(this.search);
					}
					if(newArr.length >= 11 ){
						newArr.pop()
					}
					
					newArr = JSON.stringify(newArr);//转换成json格式的数据
					uni.setStorage({
						key: 'searchLocal_order',
						data: newArr
					});
				}
				uni.navigateTo({
					url:"/pages/order/index?orderId="+item.id
				})
			}
			
		}
	}
</script>

<style>
	page{
		background-color: #ffff;
	}
	
	.search-main{
		 display: flex;
		 background-color: #fff;
		 padding-bottom: 30rpx;
		 
	}
	.searc_name{
		margin-top: 10px;
		z-index: 9999;
		background-color: #ffff;
	}
	
	.search-bar-box {
	  display: flex;
	  align-items: center;
	  position: relative;
	  margin-top: 30rpx;
	  margin-left:25rpx ;
	  margin-right: 50rpx;
	  padding-left: 50rpx;
	  padding-right: 50rpx;
	 /* width: 100%; */
	  box-sizing: border-box;
	  z-index: 1;
	  background:#F7F7F7;
	  border-radius: 40rpx;
		width: 100%;
		
	 
	}
	
	
	.icon-search_in-box {
	  position: absolute;
	  left: 20rpx;
	}
	
	.icon-search-clear {
	  position: absolute;
	  right: 20rpx;
	  margin-left: 10rpx;
	  top: 18rpx;
	}
	
	.icon-search {
	  margin-right: 20rpx;
	  margin-top: 20rpx;
	}
	
	.search-bar-text {
	  display: inline-block;
	  font-size: 26rpx;
	  margin-bottom: 20rpx;
	  vertical-align: middle;
	}
	
	.search-bar-label {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  z-index: 2;
	  border-radius: 10rpx;
	  text-align: center;
	  color: #ccc;
	  background: #fff;
	  line-height: 50rpx;
	}
	
	.search-bar-input {
	  height: 75rpx;
	  line-height: 60rpx;
	  font-size: 26rpx;
	  margin: 0 10rpx;
	  width: 100%;
	  margin-left: 20rpx;
	      background: rgb(241 245 248 / 3%);
		
	}
</style>